import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, LOCALE_ID } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClientJsonpModule, HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { OverlayModule } from '@angular/cdk/overlay';
import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { DragDropModule } from '@angular/cdk/drag-drop';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { WorkbenchComponent } from './workbench/workbench.component';
import { BannerComponent } from './banner/banner.component';
import { MainComponent } from './main/main.component';
import { NavigaterComponent } from './navigater/navigater.component';
import { ChatComponent } from './chat/chat.component';
import { VideozoneComponent } from './videozone/videozone.component';
import { WhiteboardComponent } from './whiteboard/whiteboard.component';
import { ToolboxComponent } from './whiteboard/toolbox/toolbox.component';
import { ControllerComponent } from './whiteboard/controller/controller.component';
import { PaletteComponent } from './whiteboard/palette/palette.component';
import { MessageComponent } from './chat/message/message.component';
import { AvatarComponent } from './common/avatar/avatar.component';
import { SendboxComponent } from './chat/sendbox/sendbox.component';
import { VideoComponent } from './videozone/video/video.component';
import { RecordComponent } from './record/record.component';
import { MessageboxComponent } from './chat/messagebox/messagebox.component';
import { CalendarComponent } from './calendar/calendar.component';
import { ScheduleComponent } from './schedule/schedule.component';
import { BookedComponent } from './booked/booked.component';
import { PainterComponent } from './whiteboard/painter/painter.component';
import { MessageDialogComponent } from './dialog/message-dialog/message-dialog.component';

import localeZhHans from '@angular/common/locales/zh-Hans';
import { registerLocaleData } from '@angular/common';
import { LoginComponent } from './UI/login/login.component';
registerLocaleData(localeZhHans);

import { ConferenceListComponent } from './dialog/conference-list/conference-list.component';
import { RegisterDialogComponent } from './dialog/register-dialog/register-dialog.component';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

@NgModule({
    declarations: [
        AppComponent,
        BannerComponent,
        MainComponent,
        NavigaterComponent,
        WorkbenchComponent,
        ChatComponent,
        VideozoneComponent,
        WhiteboardComponent,
        ToolboxComponent,
        ControllerComponent,
        PaletteComponent,
        MessageComponent,
        AvatarComponent,
        SendboxComponent,
        VideoComponent,
        RecordComponent,
        MessageboxComponent,
        CalendarComponent,
        ScheduleComponent,
        BookedComponent,
        PainterComponent,
        MessageDialogComponent,
        LoginComponent,
        ConferenceListComponent,
        RegisterDialogComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        HttpClientJsonpModule,
        HttpClientXsrfModule,
        LoggerModule.forRoot({
          serverLoggingUrl: '/api/log',
          level: NgxLoggerLevel.WARN
        }),
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        MatDialogModule,
        DragDropModule,
        OverlayModule,
    ],
    providers: [
        { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: false } },
        { provide: LOCALE_ID, useValue: 'zh-Hans' }
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
   // Diagnostic only: inspect router configuration
   constructor(router: Router) {
    // Use a custom replacer to display function names in the route configs
    // const replacer = (key, value) => (typeof value === 'function') ? value.name : value;
    // this.log.debug('Routes: ', JSON.stringify(router.config, replacer, 2));
  }
}
